<template>
  <div>
    <s-title text="客流监测"></s-title>
    <div class="head-scenery">
      <div class="head-scenery-title">
        <span class="title-iconL"></span>
        <span class="title-icon"></span>
        <span class="title-text">景区:</span>
        <template>
          <el-select
            v-model="scenerydefault"
            placeholder="请选择"
            @change="handerScenery(scenerydefault)"
          >
            <el-option
              v-for="(item, index) in optionScenery"
              :label="item.lable"
              :value="item.value"
              :key="index"
            >
            </el-option>
          </el-select>
        </template>
        <span class="title-iconR"></span>
      </div>
      <div class="head-scenery-content">
        <div
          class="head-scenery-content-box"
          v-for="(item, index) in scenery"
          :key="index"
        >
          <div class="head-scenery-content-top">
            <span class="head-scenery-content-value">{{ item.value }}</span>
            <span class="head-scenery-content-lable">{{
              item.name === "峰值时间" ||
              item.name === "环比" ||
              item.name === "风险等级"
                ? ""
                : "人"
            }}</span>
          </div>
          <div class="head-scenery-content-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="head-subway">
      <div class="head-subway-title">
        <span class="title-iconL"></span>
        <span class="title-icon1"></span>
        <span class="title-text">地铁站:</span>
        <!-- <span class="title-value">豫园</span> -->
        <template>
          <el-select
            v-model="subwaydefault"
            placeholder="请选择"
            @change="handerSubway(subwaydefault)"
          >
            <el-option
              v-for="(item, index) in subwayList"
              :label="item.label"
              :value="item.value"
              :key="index"
            >
            </el-option>
          </el-select>
        </template>
        <span class="title-iconR"></span>
      </div>
      <div class="head-subway-content">
        <div
          class="head-subway-content-box"
          v-for="(item, index) in subway"
          :key="index"
        >
          <!-- <div class="head-subway-bg">
            <span class="head-subway-value">{{ item.value }}</span>
          </div> -->
          <div class="head-subway-bg-content">
            <div class="head-subway-bg-outer"></div>
            <div class="head-subway-bg"><span class="head-subway-value">{{ item.value}}</span></div>
            <div class="head-subway-bg-inner"></div>
          </div>
          <div class="head-subway-name">
            <div class="head-subway-name-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="head-park">
      <div class="head-park-title">
        <span class="title-iconL"></span>
        <span class="title-icon2"></span>
        <span class="title-text">停车场:</span>
        <template>
          <el-select
            v-model="Parkdefault"
            placeholder="请选择"
            @change="handerPark(Parkdefault)"
          >
            <el-option
              v-for="(item, index) in optionsPark"
              :label="item.lable"
              :value="item.value"
              :key="index"
            >
            </el-option>
          </el-select>
        </template>
        <span class="title-iconR"></span>
      </div>
      <div class="head-park-content">
        <div
          class="head-park-content-box"
          v-for="(item, index) in park"
          :key="index"
        >
          <div class="head-park-left">
            <div class="head-park-icon"></div>
          </div>
          <div class="head-park-right">
            <span class="head-park-name">{{ item.name }}</span>
            <span class="head-park-value">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import {
  park,
  peopleStreamMetro,
  metroList,
  peopleStream,
  parklist
} from "../../../utils/api";
export default {
  name: "passengerFlow",
  components: {
    sTitle,
  },
  data() {
    return {
      spot_level: {
        SHHPQ_WAITAN: {
          10000: "三级",
          15000: "二级",
          20000: "一级",
        },
        SHHPQ_NANJINGLU: {
          10000: "三级",
          15000: "二级",
          20000: "一级",
        },
        SHHPQ_YUYUAN_WAIQUAN: {
          20000: "三级",
          30000: "二级",
          40000: "一级",
        },
        SHHPQ_YUYUAN_NEIQUAN: {
          20000: "三级",
          30000: "二级",
          40000: "一级",
        },
        SHHPQ_TIANZIFANG: {
          2000: "三级",
          4000: "二级",
          5000: "一级",
        },
        SHHPQ_XINTIANDI: {
          2000: "三级",
          3000: "二级",
          7000: "一级",
        },
      },
      scenery: [
   { name: "实时人流量", value: "--" },
        { name: "当日累计", value: "--" },
        { name: "峰值", value: "--" },
        { name: "环比", value: "-%" },
        { name: "峰值时间", value: "--:--" },
        { name: "风险等级", value: "--" },
      ],
      optionScenery: [
        { value: "SHHPQ_XINTIANDI", lable: "新天地" },
      ],
      scenerydefault: "新天地",
      subway: [
        { name: "近5分钟进站人数", value: "2833" },
        { name: "近5分钟出站人数", value: "2833" },
        { name: "当日累计进站人数", value: "2833" },
        { name: "当日累计出站人数", value: "2833" },
      ],
      park: [
        { name: "停车场数量", value: "10" },
        { name: "已停车位", value: "165" },
        { name: "剩余车位", value: "35" },
      ],
      optionsPark: [
      ],
      Parkdefault: "",
      subwayList: [],
      subwaydefault: "淮海中路",
      Subwayitem:'淮海中路',
      Parkitem:'',
      Sceneryitem:'SHHPQ_XINTIANDI',
    };
  },
  created() {},
  mounted() {
    parklist(
      JSON.stringify({
        streetname: "淮海中路",
      })
    ).then((res) => {
      if (res.status === 200) {
        for (let i = 0, l = res.data.data.length; i < l; i++) {
          this.optionsPark.push({
            value: res.data.data[i].parkName,
            lable: res.data.data[i].parkName,
          });
        }
        let param = {
          parkName: res.data.data[1].parkName,
        };
        this.Parkitem = res.data.data[1].parkName;
        this.Parkdefault = res.data.data[1].parkName;
        park(JSON.stringify(param)).then((res) => {
          if (res.data.code === 200) {
            this.park[0].value = res.data.data.total || '--';
            this.park[1].value = res.data.data.parkingNumber || '--';
            this.park[2].value = res.data.data.total_left || '--';
          }
        });
      }
    });
    metroList(JSON.stringify()).then((res) => {
      if (res.data.code === 200) {
        for (let i = 0; i < res.data.data.length; i++) {
          // this.subwayList.push(res.data.data[i].areaName)
          this.subwayList.push({
            value: res.data.data[i].areaName,
            lable: res.data.data[i].areaName,
          });
        }
      }
    }),
      peopleStreamMetro(JSON.stringify({ stationNmCn: "淮海中路" })).then((res) => {
        if (res.data.code === 200) {
          this.subway[0].value = parseInt(res.data.data.fiveMinuteInSum) / 100;
          this.subway[1].value = parseInt(res.data.data.fiveMinuteOutSum) / 100;
          this.subway[2].value = parseInt(res.data.data.inSum) / 100;
          this.subway[3].value = parseInt(res.data.data.outSum) / 100;
        }
      }),
      peopleStream(JSON.stringify({ spotCode: "SHHPQ_XINTIANDI" })).then(
        (res) => {
          if (res.data.code === 200) {
            var level = "四级";
            var levelData = this.spot_level[res.data.data.spotCode];
            for (var key in levelData) {
              if (
                res.data.data.realtimeNumber.toString().indexOf("<") === -1 &&
                parseInt(res.data.data.realtimeNumber) >= parseInt(key)
              ) {
                level = levelData[key];
              }
            }
            this.scenery[0].value = res.data.data.realtimeNumber;
            this.scenery[1].value = res.data.data.totalNumber;
            this.scenery[2].value = res.data.data.maxNumber;
            this.scenery[3].value = res.data.data.monthOnMonth;
            this.scenery[4].value = res.data.data.maxTime;
            this.scenery[5].value = level;
          }
        }
      );
    setInterval(() => {
      this.handerPark(this.Parkitem);
    }, 30000);
    setInterval(() => {
      this.handerScenery(this.Sceneryitem);
    }, 30000);
    setInterval(() => {
      this.handerSubway(this.Subwayitem);
    }, 30000);
  },
  methods: {
    handerPark(item) {
        this.Parkitem = item;
      park(JSON.stringify({ parkName:item })).then((res) => {
        if (res.data.code === 200) {
    this.park[0].value = res.data.data.total || '--';
            this.park[1].value = res.data.data.parkingNumber || '--';
            this.park[2].value = res.data.data.total_left || '--';
        }
      });
    },
    handerSubway(item) {
        this.Subwayitem = item;
      peopleStreamMetro(JSON.stringify({ stationNmCn: item })).then((res) => {
        if (res.data.code === 200) {
          this.subway[0].value = parseInt(res.data.data.fiveMinuteInSum) / 100;
          this.subway[1].value = parseInt(res.data.data.fiveMinuteOutSum) / 100;
          this.subway[2].value = parseInt(res.data.data.inSum) / 100;
          this.subway[3].value = parseInt(res.data.data.outSum) / 100;
        }
      });
    },
    handerScenery(item) {
      this.Sceneryitem = item;
      peopleStream(JSON.stringify({ spotCode: item })).then((res) => {
        if (res.data.code === 200) {
          var level = "四级";
          var levelData = this.spot_level[res.data.data.spotCode];
          for (var key in levelData) {
            if (
              res.data.data.realtimeNumber.toString().indexOf("<") === -1 &&
              parseInt(res.data.data.realtimeNumber) >= parseInt(key)
            ) {
              level = levelData[key];
            }
          }
          this.scenery[0].value = res.data.data.realtimeNumber;
          this.scenery[1].value = res.data.data.totalNumber;
          this.scenery[2].value = res.data.data.maxNumber;
          this.scenery[3].value = res.data.data.monthOnMonth;
          this.scenery[4].value = res.data.data.maxTime;
          this.scenery[5].value = level;
        }
      });
    },
  },
};
</script>

<style scoped>
.head-scenery {
  height: 130px;
  width: 96%;
}
.head-scenery-title {
  width: 300px;
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.title-iconL {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-left.png");
}
.title-icon {
  width: 38px;
  height: 38px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 5px;
  background-image: url("../../../assets/image/left2/scenery-icon.png");
}
.title-text {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #cccccc;
  margin-right: 10px;
}
.title-value {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
}
.title-iconR {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-right.png");
  margin-left: 10px;
}
.head-scenery-content {
  height: 98px;
  width: 100%;
  display: flex;
}
.head-scenery-content-box {
  width: 103px;
  height: 52px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/small-content-left-box-item.png");
}
.head-scenery-content-box:nth-child(2) {
  margin-top: 50px;
}
.head-scenery-content-box:nth-child(5) {
  margin-top: 50px;
}
.head-scenery-content-top {
  width: 100%;
  height: 26px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 26px;
  display: flex;
  justify-content: center;
}
.head-scenery-content-value {
  color: #ffff00;
}
.head-scenery-content-lable {
  color: #ffffff;
}
.head-scenery-content-name {
  width: 100%;
  height: 26px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.head-subway {
  width: 512px;
  height: 185px;
  margin: auto;
  margin-top: 10px;
}
.head-subway-title {
  width: 300px;
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.title-iconL {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-left.png");
}
.title-icon1 {
  width: 38px;
  height: 38px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 5px;
  background-image: url("../../../assets/image/left2/subway-icon.png");
}
.title-text {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #cccccc;
  margin-right: 10px;
}
.title-value {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
}

.title-iconR {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-right.png");
  margin-left: 10px;
}
.head-subway-content {
  width: 512px;
  height: 130px;
  display: flex;
  justify-content: space-between;
}
.head-subway-content-box {
  width: 100px;
  height: 130px;
  margin-top: 20px;
}
@keyframes outer_play {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.head-subway-bg-content{
  width: 100px;
  height: 90px;
  position: relative;
}
.head-subway-bg-outer{
  width: 90px;
  height: 90px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/Real-population-bg-line1.png");
  position: absolute;
  left: 5px;
  animation:outer_play 10s linear infinite;
}
.head-subway-bg {
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/Real-population-bg.png");
  position: absolute;
  left: 10px;
  top: 5px;
  display: flex;
  align-items: center;
}
@keyframes inner_play {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
.head-subway-bg-inner{
  width: 86px;
  height: 86px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/Real-population-bg-line2.png");
  /* display: flex; */
  /* align-items: center; */
  position: absolute;
  left: 7px;
  top: 2px;
  animation:inner_play 10s linear infinite;
}
.head-subway-value {
  display: inline-block;
  width: 87px;
  height: 20px;
  font-size: 18px;
  font-family: "HuXiaoBo-NanShen";
  font-weight: bold;
  color: #3dffef;
  line-height: 20px;
  text-align: center;
}
.head-subway-name {
  width: 100px;
  height: 19px;
}
.head-subway-name-text {
  display: inline-block;
  width: 100px;
  height: 18px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  margin-top: 5px;
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: url("../../../assets/image/left2/passengerFlow-line.png");
  padding-bottom: 10px;
  text-align: center;
}
.head-park {
  width: 96%;
  height: 130px;
}

.head-park-title {
  width: 300px;
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.title-iconL {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-left.png");
}
.title-icon2 {
  width: 38px;
  height: 38px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 5px;
  background-image: url("../../../assets/image/left2/park-number.png");
}
.title-text {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #cccccc;
  margin-right: 10px;
}
.title-value {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
}
.park-select {
  width: 120px;
  height: 30px;
}
.el-select {
  width: 120px;
  height: 30px;
}
.el-input .el-input--suffix .is-focus .el-input__inner {
  background-color: #041633 !important;
  color: #ffffff;
}
.el-select .el-input__inner {
  height: 30px !important;
}
.el-select-dropdown__empty {
  padding: 5px 0 !important;
}
.title-iconR {
  width: 15px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/arrow-right.png");
  margin-left: 10px;
}
.head-park-content {
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
}
.head-park-content-box {
  margin-top: 18px;
  width: 180px;
  height: 80px;
  display: flex;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left2/park-bg.png");
}
.head-park-left {
  width: 50%;
  height: 80px;
}
.head-park-content-box:nth-child(1) .head-park-icon {
  background-image: url("../../../assets/image/left2/park-icon.png");
}
.head-park-content-box:nth-child(2) .head-park-icon {
  background-image: url("../../../assets/image/left2/park-hasStopped.png");
}
.head-park-content-box:nth-child(3) .head-park-icon {
  background-image: url("../../../assets/image/left2/park-remaining.png");
}
.head-park-icon {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.head-park-right {
  width: 50%;
  height: 80px;
}
.head-park-name {
  display: inline-block;
  width: 76px;
  height: 37px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #66d1f9;
  line-height: 47px;
}
.head-park-value {
  display: inline-block;
  width: 76px;
  height: 30px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ff9c00;
  line-height: 40px;
  text-align: center;
}
</style>